<template>
  <el-header>
    <PageHeader :router_list="router_list" :show-logo="false"/>
  </el-header>
  <el-main>
    <header>
      <div class="le">
        <span class="importantBtn">
          <img :src="image.add" alt="">
          导入成员
        </span>
        <div class="icont">
          <img :src="image.add" alt="">
          下载成员
        </div>
        <div class="icont">
          退课记录
        </div>
        <div class="el-badge icont">
          报名审核
        </div>
      </div>

      <div class="ri">
        <div>
          <el-radio label="Chicago" value="Chicago" />
        </div>

        <div>
          <el-radio label="不允许退课" value="Chicago" />
        </div>

        <div class="session_search">
          <el-input placeholder="搜索姓名、学号" :prefix-icon="Search"/>
        </div>
      </div>
    </header>
    <main>
      <div class="le">
        <el-tabs v-model="contentIndex" tab-position="top"  class="demo-tabs">
          <el-tab-pane label="全部成员" name="0">
            <div class="list">
              <div class="teacherTeam teacherTeamActive">
                <span @click="() => {changeClo('教师')}">教学团队({{1}})</span>
                <div class="studentTeam"
                     style="cursor: unset; display: flex; align-content: center; align-items: center;"
                     @click.stop="stuListDisplay = stuListDisplay === 'flex' ? 'none' : 'flex'"
                >
                  <div class="all_student_item">
                    <img class="el-icon-caret-bottom"
                         :src="image.tra" width="11px" height="11px"
                         :class="{rotate90: stuListDisplay === 'none'}"
                    />
                    <span @click="() => {changeClo('学生')}">
                      全部学生({{0}})
                    </span>
                  </div>
                </div>
                <div :style="{display: stuListDisplay}">
                  <ul>
                    <li>
                      <span>
                        默认标签({{0}})
                      </span>

                      <el-dropdown placement="bottom" trigger="click">
                        <img :src="image.and_so_clo" style="width: 13px; height: 13px" />
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item>
                              重命名
                            </el-dropdown-item>
                            <el-dropdown-item>
                              删除
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="学生分组" name="1">
            <div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="ri">
        <div class="member-list">
          <header>
            <div class="header">
              <h1>
                教师团队
              </h1>

              <span>
                共{{1}}人
              </span>
            </div>

            <el-button type="primary">
              <img :src="image.add" alt="" style="width: 14px; height: 14px; color: white">
              <span style="margin-left: 5px;">添加助教/老师</span>
            </el-button>
          </header>

          <div class="tabView">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="selection" width="45" />
              <el-table-column v-for="item in tableClo"
                               :prop="item.prop"
                               :label="item.label"
                               :width="item.width"
              />
              <el-table-column prop="operation" label="" width="243"
                               style="color:#5383ec;"
                               v-if="targetSelection === '教师'"
              >
              </el-table-column>

              <el-table-column prop="letter" width="243"
                               style="color:#5383ec;"
                               v-if="targetSelection === '学生'"
              >
                <template #header>
                  <span style="color:#5383ec; font-weight: 400;">
                  群发私信
                </span>
                <span style="color:#5383ec; font-weight: 400; margin-left: 20px">
                  删除成员
                </span>
                </template>
              </el-table-column>

              <template #empty>
                <Empty></Empty>
              </template>
            </el-table>
          </div>

          <el-footer class="pagination" v-if="tableData.length > 0">
            <el-config-provider :locale="locale">
              <el-pagination
                  :page-sizes="[10, 15, 20, 25]"
                  layout="total, sizes, prev, pager, next"
                  :total="10"
              />
            </el-config-provider>
          </el-footer>
        </div>
      </div>
    </main>
  </el-main>
</template>

<script setup>

import PageHeader from "../../components/PageHeader/index.vue";
import {ref} from "vue";
import {image} from "../../assets/index.js";
import {Search} from "@element-plus/icons-vue";
import locale from "element-plus/es/locale/lang/zh-cn"
import {teacherClo} from "./TableInfo/TeacherClo.js";
import Empty from "../ClassDetails/components/Empty/index.vue"
import {studentClo} from "./TableInfo/StudentClo.js";

const router_list = ref([
  {
    name: '课程内容',
    link: '/main/detail'
  },
  {
    name: '成员',
    link: '/main/member'
  }
])

const contentIndex = ref('0')

const stuListDisplay = ref('flex')

const tableClo = ref([...teacherClo])

const tableData = ref([
  // {
  //   name: 'sakj',
  //   account: 'sas0',
  //   role: 'sak'
  // }
])

const changeClo = (value) => {
  targetSelection.value = value
  if (value === '学生') {
    tableClo.value = [...studentClo]
  } else {
    tableClo.value = [...teacherClo]
  }
}

const targetSelection = ref('教师')
</script>

<style scoped>
.rotate90 {
  transform: rotate(-90deg);
}

.el-header {
  height: fit-content;
}

.el-main {
  width: 1150px;
  margin: 0 auto;

  header {
    margin-bottom: 16px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .le {
      display: flex;
      align-items: center;
      justify-content: space-between;

      img {
        height: 18px;
        width: 18px;
        margin-right: 5px;
      }

      .importantBtn {
        width: 120px;
        height: 48px;
        display: flex;
        align-items: center;
        box-shadow: rgba(0, 202, 144, 0.3) 0px 2px 4px 0px;
        border-radius: 24px;
        background: rgb(0, 202, 144);
        color: rgb(255, 255, 255);
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
      }

      .icont {
        color: rgb(66, 133, 244);
        cursor: pointer;
        margin-left: 25px;
        font-size: 14px;

        img {
          height: 18px;
          width: 18px;
          margin-bottom: -5px;
          margin-right: 5px;
        }

        svg {
          color: rgb(66, 133, 244);
        }
      }

      .el-badge {
        color: rgb(66, 133, 244);
        cursor: pointer;
        margin-left: 25px;
        font-size: 14px;
      }
    }

    .ri {
      display: flex;
      align-items: center;
      justify-content: space-between;

      :deep(.el-radio__inner) {
        margin-left: 30px;
        border-radius: 0;
      }

      .session_search {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 15px;
        margin-left: 24px;
        border: 1px solid rgb(218, 220, 224);
        border-radius: 16px;
        line-height: 32px;
        padding-left: 10px;

        :deep(.el-input__wrapper) {
          width: 180px;
          display: flex;
          justify-content: space-between;
          flex-direction: row-reverse;
          border: none;
          box-shadow: none;
        }
      }
    }
  }

  main {
    display: flex;

    .le {
      position: absolute;
      top: unset;

      flex: 0 0 270px;
      width: 260px;
      height: min-content;
      border-radius: 8px;
      border: 1px solid rgb(218, 220, 224);
      margin-right: 25px;
      padding-bottom: 25px;

      .list {
        min-height: 400px;
      }

      .teacherTeam {
        cursor: pointer;
        padding-left: 33px;
        height: 40px;
        line-height: 40px;
        color: rgb(60, 64, 67);
        font-weight: 700;
        font-size: 14px;

        .studentTeam {
          cursor: pointer;
          height: 40px;
          line-height: 40px;
          color: rgb(60, 64, 67);
          font-weight: 700;
          font-size: 14px;
          position: relative;

          i {
            position: absolute;
            font-size: 16px;
            color: rgb(95, 99, 104);
            font-family: element-icons,sans-serif !important;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: baseline;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
          }

          .all_student_item {
            color: rgb(60, 64, 67);
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center;

            img {
              margin-left: -20px;
              margin-right: 10px;
            }

            span {
              color: rgb(60, 64, 67);
              font-weight: 700;
              display: flex;
              justify-content: space-between;
              width: 100%;
            }
          }
        }
      }

      ul {
        max-height: 300px;
        overflow: auto;
        width: 100%;

        li {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding-right: 13px;

          img {
            margin: auto 0;
          }
        }
      }
    }

    :deep(.el-tabs) {

    }

    :deep(.el-tabs__nav-wrap) {
      overflow: hidden;
      margin-bottom: -1px;
      position: relative;
    }

    :deep(.el-tabs__nav-scroll) {
      overflow: hidden;
    }

    :deep(.el-tabs__nav) {
      white-space: nowrap;
      position: relative;
      transition: transform .3s;
      float: left;
      z-index: 2;
      width: 100%;
    }

    :deep(.el-tabs__active-bar) {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      background-color: #4285f4;
      z-index: 1;
      transition: transform .3s cubic-bezier(.645,.045,.355,1);
      list-style: none;
    }

    :deep(.el-tabs__item) {
      height: 48px;
      line-height: 48px;
      width: 50%;
      text-align: center;

      &:nth-child(1) {
        padding: 0 20px 0 0;
      }
    }

    .ri {
      flex: 1 1 0%;
      border-radius: 8px;
      border: 1px solid rgb(218, 220, 224);
      width: 850px;
      margin-left: 280px;

      .member-list {
        header {
          padding: 24px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: fit-content;

          .header {
            h1 {
              font-size: 20px;
              color: rgb(32, 33, 36);
              display: inline-block;
              margin-right: 12px;
              font-weight: 700;
              margin-bottom: 8px;
            }

            span {
              font-size: 12px;
              color: #98adb0;
            }
          }
        }

        .tab_view {
          position: relative;
          padding-left: 10px;
          padding-right: 10px;
        }
      }

      .tabView {
        position: relative;
        padding-left: 10px;
        padding-right: 10px;
      }

      :deep(.el-table__header-wrapper) {
        background-color: #f6f6f6;
      }

      .pagination {
        padding: 16px;
        .el-pagination {
          margin: 0 auto;
          width: fit-content;
        }
      }
    }
  }
}
</style>
